import React from 'react'
import PropTypes from 'prop-types'
import { Divider, Button, } from 'antd'
import styles from './Header.less'

export default class extends React.PureComponent {

  static propTypes = {
    sf_id: PropTypes.number,
    sf_name: PropTypes.string,
    sf_header: PropTypes.string,
    dp_name: PropTypes.string,
    taskCount: PropTypes.number,
    sf_tel: PropTypes.number,
    fetchProfile: PropTypes.func
  }

  static defaultProps = {
    sf_id: 0,
    sf_name: '',
    sf_header: '',
    dp_name: '',
    taskCount: 0,
    sf_tel: 0,
    // 默认去进行中的项目 index: 1
    fetchProfile: () => {}
  }

  render() {
    // eslint-disable-next-line
    const { sf_id, sf_name, sf_header, dp_name, taskCount, sf_tel, fetchProfile } = this.props

    return (
      <header className={styles.header} style={{marginBottom: 16}}>
	    
        <section>
	        <img src={sf_header} width="50" alt="" />
	        <b className={styles.name}>{sf_name}</b>
	        <Button type="primary">{dp_name}</Button>
	      </section>

	      <section>
	        参与的进行中项目数：<b>{taskCount}</b> <Divider type="vertical" />联系电话：<b>{sf_tel}</b>
	      </section>
	      
        <hgroup style={{textAlign: 'right'}}>                      
	        <Button 
	          type="primary"
	          icon="profile"
	          ghost
	          onClick={() => fetchProfile({index: 1, id: sf_id})} 
	          style={{ marginLeft: 12 }}
	        >
	          详情
	        </Button>
	      </hgroup>
	    
      </header>
    )
  }
}